<template>
  <div class="card content-box">
    <h4>onBeforeMount</h4>
    <h4>onMounted</h4>
    <h4>onBeforeUpdate</h4>
    <h4>onUpdated</h4>
    <h4>onBeforeUnmount</h4>
    <h4>onUnmounted</h4>
  </div>
</template>

<script setup lang="ts">
/*
        + vue3的组合式生命周期优先执行
        + setup()替代了两个生命周期钩子
          ==>beforeCreate
          ==>created
        + 弃用了beforeDestroy和destroyed
          ==>beforeUnmount
          ==>unmounted
        + 生命周期写在setup上，hook写法类似于vue2中的混入
*/
import {
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted
} from "vue";
onBeforeMount(() => {
  //挂载前
  console.log("onBeforeMount");
});
onMounted(() => {
  //挂载中
  console.log("onMounted");
});
onBeforeUpdate(() => {
  //更新前
  console.log("onBeforeUpdate");
});
onUpdated(() => {
  //更新中
  console.log("onUpdated");
});
onBeforeUnmount(() => {
  //卸载前
  console.log("onBeforeUnmount");
});
onUnmounted(() => {
  //卸载中
  console.log("onUnmounted");
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
